<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,user-scalable=no">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <title>价格计算器</title>
    <script src="resources/js/zepto.min.js"></script>
    <style>
        body {
            background-image: url("resources/images/bg.png");
            background-size: 100%;
            font-family: helvetica, "Heiti SC", serif;
            margin: 9px;
        }
        h1 {
            margin: 0;
            font-size: 17px;
            color: #4c566c;
            text-shadow: 0.5px 1px #ffffff;
            font-family: helvetica, "Heiti SC", serif;
            padding: 9px 12px;
        }
        .ios-grouped-style-form {
            background-color: #f7f7f7;
            border: 1px solid #afb3ba;
            border-radius: 8px;
            box-shadow: inset 0 1px 1px rgba(175, 179, 186, 0.6), 0 2px 0 -1px rgba(255, 255, 255, 0.5);
            font-size: 17px;
            margin-bottom: 20px;
        }
        .ios-grouped-style-form label {
            display: block;
            position: relative;
            width: 100%;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            height: 44px;
            border-bottom: 1px solid #cacaca;
            border-top: 1px solid #fdfdfd;
            padding: 9px 11px;
            font-size: 17px;
            font-weight: bold;
            line-height: 24px;
        }
        .ios-grouped-style-form > label:first-of-type {
            border-top: 0 none;
        }
        .ios-grouped-style-form > label:last-of-type {
            border-bottom: 0 none;
        }
        .ios-grouped-style-form input, .ios-grouped-style-form select {
            /*border-radius: 0;*/
            position: absolute;
            left: 100px;
            right: 11px;
            font-family: helvetica, "Heiti SC", serif;
            border: 0 none;
            padding: 0;
            background-color: #f7f7f7;
            height: 24px;
            line-height: 24px;
            font-size: 17px;
        }

        button {
            width: 100%;
            box-sizing: border-box;
            font-size: 13px;
            line-height: 36px;
            font-family: sans-serif;
            font-weight: bold;
            color: #fff;
            padding: 0 15px;
            border: solid 1px;
            border-color: #2978B0 #266FA5 #1C557D;
            border-radius: 3px;
            background: -webkit-gradient( linear, left top, left bottom,
            from(#50A9E7), to(#307CB3) );
            box-shadow: inset 0 1px 0 rgba(255,255,255,.2),
            0 1px 1px rgba(0,0,0,.08);
            text-shadow: 0 -1px 0 rgba(0,0,0,.25);
        }

        #result {
            display: none;
        }
    </style>
</head>
<body>
<h1>价格计算器</h1>
<form id="param-form" class="ios-grouped-style-form" target="param-form-submit" method="POST" action="data.php">
    <label>名称<input type="text" placeholder="John Appleseed"></label>
    <label>电子邮件<input type="email" placeholder="example@qq.com"></label>
    <label>密码<input type="password" placeholder="必填"></label>
    <label>描述<input type="text" placeholder="我的“QQ”帐户"></label>
    <label>套餐类型<select name="type"><option>办公版</option></select></label>
    <label>开通有效期<select name="type"><option>1年</option><option>2年</option></select></label>
    <label>开通帐号数<input type="number" name=""></label>
</form>
<div id="result">
    <h1>结果</h1>
    <form class="ios-grouped-style-form">
        <label>名称<input type="text" placeholder="John Appleseed"></label>
        <label>电子邮件<input type="email" placeholder="example@qq.com"></label>
        <label>描述<input type="text" placeholder="我的“QQ”帐户"></label>
    </form>
</div>
<button id="calculate">计算价格</button>
<iframe src="" style="display: none" id="param-form-submit" name="param-form-submit"></iframe>

<script>
    Zepto('#calculate').click(function () {
        Zepto('#param-form').submit();
        Zepto('#result').hide();
    });
    Zepto('#param-form-submit').bind('load', function () {
        var result = JSON.parse(this.contentDocument.body.innerHTML || '{}');
        if (result.success) {
            Zepto('#result').show();
        } else {
            alert(result.msg);
        }
    });
</script>
</body>
</html>